<template>
	<view class="page">
		<view class="page_header">
			<navigation defaultButton="back">医养护理</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" v-model="typeSerchModel.search" @confirm="getTypeAllList" type="text" value="" placeholder="请输入服务类别名称" placeholder-class="page_header_search_placeholder" />
			</view>
		</view>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true">
			<view class="list_panel">
				<view class="list_item" v-for="(item,index) in typeList" :key="index" @tap="goList(item)">
					<view class="list_left">
						<image class="icon_panel" :src="item.img" mode=""></image>
						<view class="label">{{item.name}}</view> 
					</view>
					<view class="list_right">
						{{item.count || 0}}项服务&nbsp;<text class="nursing-icon iconyoujiantou"></text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as userServeApi from '@/api/userApi/serve.js';
	export default {
		data() {
			return {
				typeSerchModel: {
					search: '',
					type: this.$enums['服务类型分类']['医养护理']
				},
				typeList: [],
			};
		},
		onShow() {
			this.getTypeAllList();
		},
		methods: {
			goList(data){
				uni.navigateTo({
					url: `/pages/index/nurse/nurseList/nurseList?id=${data.id}`
				});
			},
			getTypeAllList() {
				userServeApi
					.getServeType(this.typeSerchModel)
					.then(res => {
						if (res.code === 0) {
							if (res.data && res.data.length > 0) {
								this.typeList = res.data;
							}
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			}
		}
	}
</script>

<style lang="stylus">
	.page_scroll {
		position absolute;
		top calc(210rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;
		background-color #fff;

	}

	.list_panel {
		width 100%;
		padding 0rpx 30rpx;
		box-sizing border-box;

		.list_item {
			display flex;
			align-items center;
			justify-content space-between;
			margin-top 40rpx;
			box-sizing border-box;
			&:last-child {
				margin-bottom 20rpx;
			}
			.list_left {
				display flex;
				align-items center;

				.icon_panel {
					width: 100rpx;
					height: 100rpx;
					background-color rgba(255, 66, 0, 0.18);
					border-radius: 20rpx;
				}

				.label {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left 20rpx;
				}
			}

			.list_right {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				.nursing-icon {
					font-size 20rpx;
				}
			}
		}
	}
</style>
